<template>
	<view class="vh-100 vw-100">
		<swiper class="vh-100" indicator-color="#fff" indicator-dots :current='index' @change="changeSwiper">
			<swiper-item v-for="item in image">
				<image :src="item" class="vh-100 vw-100" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view v-if="showType==1"
			class="position-fixed right-20 fs-12 text-white w-25 h-25 flex flex-center rounded-circle bg "
			:style="`top: ${height + 10}px`">
			{{time}}
		</view>
		<view v-if="showType==2"
			class="position-fixed right-20 fs-12 text-white px-10 py-4 rounded-30 bg flex flex-y-center"
			:style="`top: ${height + 10}px`" @click="close()">
			{{time}} | 跳过
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, defineEmits } from 'vue';
	import { useWebConfigStore, useRefs } from "@/stores/index";
	import { $http, useStorage } from '@/utils';
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const emit = defineEmits(['close'])
	const time = ref(5)
	const timer = ref()
	const index = ref(0)
	const showType = ref(1)
	// #ifndef H5
	const height = uni.getMenuButtonBoundingClientRect().bottom
	// #endif
	// #ifdef H5
	const height = 10
	// #endif
	const image = ref([])

	onMounted(() => {
		uni.hideTabBar()
		getAd()
	})

	const getAd = () => {
		$http.get('Config/getAd').then(res => {
			image.value = res.data
			if (!image.value.length) {
				emit('close')
				return;
			}
			time.value = WEBCONFIG.value.screen_advertisement_time
			countDown()
		});
	}

	const countDown = () => {
		timer.value = setInterval(() => {
			time.value--;
			if ((WEBCONFIG.value.screen_advertisement_time - time.value) >= WEBCONFIG.value
				.screen_advertisement_close) {
				showType.value = 2
			}
			if (time.value == 0) {
				close()
			}
		}, 1000)
	}
	const changeSwiper = (e) => {
		if (e.detail.current + 1 == image.value.length) {
			showType.value = 2
		}
	}
	const clearTime = () => {
		clearInterval(timer.value)
	}

	const close = () => {
		useStorage().set('ADSHOW', true);
		clearTime()
		if (WEBCONFIG.value.custom_tabbar == '2') {
			uni.showTabBar()
		}
		emit('close')
	}
</script>

<style scoped>
	.bg {
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 9999;
	}
</style>